<template>
  <a-form
    ref="formRef"
    :model="formState"
    :label-col="{ span: 2 }"
    autoComplete="off"
    class="gerenyoushi"
    :rules="rules"
  >
    <a-form-item label="个人优势" name="advantage">
      <a-textarea
        style="height: 160px"
        size="large"
        v-model:value.trim="formState.advantage"
        placeholder="请输入个人优势"
        :maxlength="140"
      />
    </a-form-item>

    <a-col :span="24" class="btn-box">
      <a-form-item>
        <a-button size="large" @click="emit('close')">取消</a-button>
        <a-button size="large" type="primary" @click="onhandleSubmit"
          >保存</a-button
        >
      </a-form-item>
    </a-col>
  </a-form>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue';
import { message } from 'ant-design-vue';
import ResumeService from '@/api/resume';
import _ from 'lodash';
const defaultFormState = {
  advantage: null,
};

const props = defineProps<{ value: any }>();
const emit = defineEmits(['finish', 'close']);
const formState = reactive(defaultFormState);
const formRef = ref();
const rules = {
  advantage: {
    required: true,
    validator: (rule: any, value: any) => {
      if (!value || value?.length < 10) {
        return Promise.reject(`个人优势最少输入10个字符`);
      }
      return Promise.resolve();
    },
  },
};

function initFormData() {
  if (!props.value) return;
  formState.advantage = props.value || null;
}

const onhandleSubmit = _.debounce((key: any) => {
  onSubmit();
}, 500);

async function onSubmit() {
  try {
    await formRef.value?.validate();
    const resp = await ResumeService.editOrAddSeekerAdvantage({ ...formState });
    if (resp.code === 200) {
      message.success('操作成功');
      emit('finish');
    } else {
      message.error(resp?.msg || '操作失败');
    }
  } catch (error) {
    console.log(error);
  }
}

onMounted(() => {
  initFormData();
});
</script>

<style lang="less" scoped>
.gerenyoushi {
  padding-top: 24px;
  padding-bottom: 8px;
  margin-bottom: 50px;
  .btn-box {
    padding-top: 8px;
  }
}
</style>
